<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
    :before-close="close"
    :title="title"
    width="800px"
    :top="'10vh'"
  >
    <el-form ref="form" :model="form" size="small" label-width="120px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础设置" name="1">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="任务名称"
                prop="name"
                :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]"
                style="width: 100%"
              >
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="用户身份"
                prop="yhsf"
                :rules="[{ required: true, message: '请选择用户身份', trigger: 'change' }]"
              >
                <el-select v-model="form.yhsf" filterable clearable>
                  <el-option
                    v-for="(item,index) in dict.service_dx"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="任务编码"
                prop="taskName"
                :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]"
                style="width: 100%"
              >
                <el-input v-model="form.taskName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="所属任务组"
                prop="taskCategory"
                :rules="[{ required: true, message: '请选择任务组', trigger: 'change' }]"
                style="width: 100%"
              >
                <el-select v-model="form.taskCategory" placeholder="请选择任务组" style="width: 100%">
                  <el-option
                    v-for="item in dict.task_group"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="数据来源"
                prop="sjlx"
                :rules="[{ required: true, message: '请选择数据来源', trigger: 'change' }]"
                style="width: 100%"
              >
                <el-select v-model="form.sjlx" placeholder="请选择数据来源" style="width: 100%">
                  <el-option value="sql" label="数据库查询" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="任务类型"
                prop="rwlx"
                :rules="[{ required: true, message: '请选择任务类型', trigger: 'change' }]"
                style="width: 100%"
              >
                <el-select v-model="form.rwlx" placeholder="请选择任务类型" style="width: 100%">
                  <el-option
                    v-for="item in dict.task_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="数据源"
                prop="dataSource.id"
                :rules="[{ required: true, message: '请选择数据源', trigger: 'change' }]"
                style="width: 100%"
              >
                <el-select v-model="form.dataSource.id" placeholder="请选择执行内容" style="width: 100%">
                  <el-option
                    v-for="item in dataSources"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="定时策略"
                prop="corn"
                :rules="[{ required: true, message: '请输入定时策略', trigger: 'blur' }]"
                style="width: 100%"
              >
                <el-popover v-model="cronPopover">
                  <cron i18n="cn" @change="changeCron" @close="cronPopover=false" />
                  <el-input slot="reference" v-model="form.corn" placeholder="请输入定时策略" @click="cronPopover=true" />
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="查询SQL"
                prop="dataSql"
                :rules="[{ required: true, message: '请输入查询SQL', trigger: 'blur' }]"
                style="width: 100%"
              >
                <el-input
                  v-model="form.dataSql"
                  type="textarea"
                  placeholder="请输入查询SQL"
                  :rows="2"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="数据测试"
              >
                <el-button
                  type="primary"
                  :loading="testLoading"
                  @click="test('form')"
                >开始测试<i class="el-icon-finished el-icon--right" /></el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="解析项"
                style="width: 100%"
                prop="columns"
                :rules="[{ required: true, message: '解析项不能为空', trigger: 'change' }]"
              >
                <el-input v-model="form.columns" :rows="2" type="textarea" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="查询结果"
                style="width: 100%"
              >
                <el-input
                  v-model="queryData"
                  readonly
                  type="textarea"
                  placeholder="请点击‘开始测试’按钮进行sql测试"
                  :rows="2"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="用户信息" name="2">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="用户账号"
                style="width: 100%"
              >
                <el-select v-model="jxx.username" placeholder="请选择用户账号关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="用户姓名"
                style="width: 100%"
              >
                <el-select v-model="jxx.nickName" placeholder="请选择用户姓名关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="班级"
                style="width: 100%"
              >
                <el-select v-model="jxx.bj" placeholder="请选择班级关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="部门"
                style="width: 100%"
              >
                <el-select v-model="jxx.bmmc" placeholder="请选择部门名称关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="邮箱"
                style="width: 100%"
              >
                <el-select v-model="jxx.email" placeholder="请选择邮箱关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="联系电话"
                style="width: 100%"
              >
                <el-select v-model="jxx.phone" placeholder="请选择联系电话关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="性别"
                style="width: 100%"
              >
                <el-select v-model="jxx.gender" placeholder="请选择性别关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="微信"
                style="width: 100%"
              >
                <el-select v-model="jxx.wx" placeholder="请选择微信关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="QQ"
                style="width: 100%"
              >
                <el-select v-model="jxx.qq" placeholder="请选择QQ关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="出生日期"
                style="width: 100%"
              >
                <el-select v-model="jxx.csrq" placeholder="请选择出生日期关联字段" style="width: 100%">
                  <el-option
                    v-for="item in columns"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cron } from 'vue-cron';
import { updateObject, saveObject, analysisEntity } from '@/api/notice/user/index';
import { queryEnable } from '@/api/system/dataSource';
export default {
  name: 'UserTaskManagerEntity',
  dicts: ['task_type', 'task_group', 'service_dx'],
  components: { cron },
  data() {
    return {
      title: '数据项管理',
      loading: false,
      testLoading: false,
      dialogFormVisible: false,
      dataSources: [],
      columns: [],
      activeNames: ['1', '2'],
      pzx: '',
      jxx: {
        id: '',
        csrq: '',
        qq: '',
        wx: '',
        email: '',
        gender: '',
        phone: '',
        bmmc: '',
        bj: '',
        nickName: '',
        username: ''
      },
      form: { id: null,
        name: '',
        taskName: '',
        taskCategory: '',
        sjlx: 'sql',
        dataSql: '',
        state: 'NORMAL',
        columns: '',
        dataSource: {
          id: null
        },
        taskClass: '',
        corn: '',
        rwlx: '',
        ssxt: '',
        pzx: ''
      },
      queryData: null,
      cronPopover: false
    };
  },
  watch: {
    columns: {
      handler(newData, oldData) {
        if (undefined !== newData) {
          this.form.columns = JSON.stringify(newData);
        } else {
          this.form.columns = '';
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    openEntity(data) {
      this.queryData = null;
      this.initDataSource();
      if (undefined !== data && undefined !== data.id && data.id !== null) {
        this.form = Object.assign({}, data);
        this.title = '修改信息';
        if (undefined !== this.form.pzx && this.form.pzx !== '' && this.form.pzx !== null) {
          this.jxx = JSON.parse(this.form.pzx);
        }
        if (undefined !== this.form.columns && this.form.columns !== '' && this.form.columns !== null) {
          this.columns = JSON.parse(this.form.columns);
        }
        this.dialogFormVisible = true;
      } else {
        this.title = '新增数据项信息';
        this.dialogFormVisible = true;
      }
    },
    save(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id !== null && undefined !== this.form.id) {
            this.form.pzx = JSON.stringify(this.jxx);
            updateObject(this.form).then(res => {
              this.$message.success('更新成功！');
              this.close();
            }).catch(() => {
              this.loading = false;
              this.$message.error('更新失败！');
            });
          } else {
            this.form.pzx = JSON.stringify(this.jxx);
            saveObject(this.form).then(res => {
              this.$message.success('保存成功！');
              this.close();
              this.loading = false;
            }).catch(() => {
              this.loading = false;
              this.$message.error('保存失败！');
            });
          }
        } else {
          this.loading = false;
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.loading = false;
      Object.assign(this.$data.form, this.$options.data.call(this).form);
      Object.assign(this.$data.jxx, this.$options.data.call(this).jxx);
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    test() {
      if (this.form.dataSource.id === null || this.form.dataSource.id === '') {
        this.$message.error('请选择数据源！');
      } else if (this.form.dataSql === null || this.form.dataSql === '') {
        this.$message.error('请填写要查询的sql！');
      } else {
        analysisEntity({ id: this.form.dataSource.id, sql: this.form.dataSql }).then(res => {
          const { data } = res;
          if (undefined !== data) {
            this.queryData = JSON.stringify(data.data);
            this.form.columns = data.entity;
            this.columns = JSON.parse(data.entity);
          }
        }).catch(() => {
          console.log('查询异常！');
        });
      }
    },
    initDataSource() {
      queryEnable().then(res => {
        this.dataSources = res;
      }).catch(() => {
        console.log('初始化数据源信息失败！');
      });
    },
    changeCron(val) {
      this.form.corn = val;
    }
  }
};
</script>

<style scoped>

</style>
